/* 按钮组件 - HarmonyOS设计指南实现 */

@import '../base/color.less';
@import '../base/font.less';
@import '../base/window.less';

/* 按钮尺寸变量 */
:root {
  --button-height-large: calc(56 * var(--unit));
  --button-height-medium: calc(48 * var(--unit));
  --button-height-small: calc(40 * var(--unit));
  --button-padding-x-large: calc(32 * var(--unit));
  --button-padding-x-medium: calc(24 * var(--unit));
  --button-padding-x-small: calc(16 * var(--unit));
  --button-border-radius: calc(8 * var(--unit));
  --button-font-size-large: var(--font-size-body-large);
  --button-font-size-medium: var(--font-size-body-medium);
  --button-font-size-small: var(--font-size-body-small);
  --button-transition-duration: 0.3s;
  --button-icon-size: calc(20 * var(--unit));
  --button-icon-gap: calc(8 * var(--unit));
}

/* 基础按钮样式 */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-icon-gap);
  border: none;
  border-radius: var(--button-border-radius);
  font-family: inherit;
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color var(--button-transition-duration) ease,
              color var(--button-transition-duration) ease,
              border-color var(--button-transition-duration) ease,
              transform 0.15s ease,
              opacity var(--button-transition-duration) ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  
  /* 默认中等尺寸 */
  height: var(--button-height-medium);
  padding: 0 var(--button-padding-x-medium);
  font-size: var(--button-font-size-medium);

  /* Focus 状态 */
  &:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }

  /* 禁用状态 */
  &:disabled,
  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
    
    &:hover,
    &:active,
    &:focus {
      transform: none !important;
      background-color: inherit !important;
      border-color: inherit !important;
    }
  }

  /* 加载状态 */
  &.loading {
    pointer-events: none;
    opacity: 0.8;
    cursor: wait;
  }

  /* 图标样式 */
  .button-icon {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    fill: currentColor;
    flex-shrink: 0;
    transition: transform 0.15s ease;
  }
}

/* 按钮尺寸变体 */
.button-large,
.button.large {
  height: var(--button-height-large);
  padding: 0 var(--button-padding-x-large);
  font-size: var(--button-font-size-large);
  
  .button-icon {
    width: calc(24 * var(--unit));
    height: calc(24 * var(--unit));
  }
}

.button-medium,
.button.medium {
  height: var(--button-height-medium);
  padding: 0 var(--button-padding-x-medium);
  font-size: var(--button-font-size-medium);
}

.button-small,
.button.small {
  height: var(--button-height-small);
  padding: 0 var(--button-padding-x-small);
  font-size: var(--button-font-size-small);
  
  .button-icon {
    width: calc(16 * var(--unit));
    height: calc(16 * var(--unit));
  }
}

/* 主要按钮 - 强调型 */
.button-primary,
.button.primary {
  background-color: var(--color-brand);
  color: var(--color-font-on-primary);

  &:hover:not(:disabled):not(.disabled):not(.loading) {
    background-color: var(--color-brand-hover);
    transform: translateY(calc(-1 * var(--unit)));
    box-shadow: 0 calc(4 * var(--unit)) calc(12 * var(--unit)) rgba(10, 89, 247, 0.3);
  }

  &:active:not(:disabled):not(.disabled):not(.loading) {
    background-color: var(--color-brand-press);
    transform: translateY(0) scale(0.98);
    box-shadow: 0 calc(2 * var(--unit)) calc(6 * var(--unit)) rgba(10, 89, 247, 0.2);
  }

  &:focus-visible {
    outline-color: var(--color-brand);
    box-shadow: 0 0 0 calc(3 * var(--unit)) rgba(10, 89, 247, 0.2);
  }
}

/* 次要按钮 - 普通型 */
.button-secondary,
.button.secondary {
  background-color: var(--color-comp-background-secondary);
  color: var(--color-font-primary);
  border: 1px solid var(--color-comp-divider);

  &:hover:not(:disabled):not(.disabled):not(.loading) {
    background-color: var(--color-interactive-hover);
    border-color: var(--color-comp-divider);
    transform: translateY(calc(-1 * var(--unit)));
    box-shadow: 0 calc(2 * var(--unit)) calc(8 * var(--unit)) rgba(0, 0, 0, 0.08);
  }

  &:active:not(:disabled):not(.disabled):not(.loading) {
    background-color: var(--color-interactive-pressed);
    transform: translateY(0) scale(0.98);
    box-shadow: 0 calc(1 * var(--unit)) calc(4 * var(--unit)) rgba(0, 0, 0, 0.1);
  }

  &:focus-visible {
    outline-color: var(--color-font-primary);
    border-color: var(--color-brand);
  }
}

/* 文本按钮 - 文字型 */
.button-text,
.button.text {
  background-color: transparent;
  color: var(--color-brand);

  &:hover:not(:disabled):not(.disabled):not(.loading) {
    background-color: var(--color-interactive-hover);
    transform: translateY(calc(-1 * var(--unit)));
  }

  &:active:not(:disabled):not(.disabled):not(.loading) {
    background-color: var(--color-interactive-pressed);
    transform: translateY(0) scale(0.98);
  }

  &:focus-visible {
    outline-color: var(--color-brand);
    background-color: var(--color-brand5);
  }
}

/* 轮廓按钮 - 边框型 */
.button-outline,
.button.outline {
  background-color: transparent;
  border: 1px solid var(--color-brand);
  color: var(--color-brand);

  &:hover:not(:disabled):not(.disabled):not(.loading) {
    background-color: var(--color-brand10);
    border-color: var(--color-brand-hover);
    transform: translateY(calc(-1 * var(--unit)));
    box-shadow: 0 calc(2 * var(--unit)) calc(8 * var(--unit)) rgba(10, 89, 247, 0.15);
  }

  &:active:not(:disabled):not(.disabled):not(.loading) {
    background-color: var(--color-brand20);
    border-color: var(--color-brand-press);
    transform: translateY(0) scale(0.98);
    box-shadow: 0 calc(1 * var(--unit)) calc(4 * var(--unit)) rgba(10, 89, 247, 0.2);
  }

  &:focus-visible {
    outline-color: var(--color-brand);
    border-color: var(--color-brand);
    box-shadow: 0 0 0 calc(3 * var(--unit)) rgba(10, 89, 247, 0.2);
  }
}

/* 危险按钮 */
.button-danger,
.button.danger {
  background-color: var(--color-waring);
  color: var(--color-font-on-primary);

  &:hover:not(:disabled):not(.disabled):not(.loading) {
    background-color: rgba(232, 64, 38, 0.9);
    transform: translateY(calc(-1 * var(--unit)));
    box-shadow: 0 calc(4 * var(--unit)) calc(12 * var(--unit)) rgba(232, 64, 38, 0.3);
  }

  &:active:not(:disabled):not(.disabled):not(.loading) {
    background-color: rgba(232, 64, 38, 0.8);
    transform: translateY(0) scale(0.98);
    box-shadow: 0 calc(2 * var(--unit)) calc(6 * var(--unit)) rgba(232, 64, 38, 0.2);
  }

  &:focus-visible {
    outline-color: var(--color-waring);
    box-shadow: 0 0 0 calc(3 * var(--unit)) rgba(232, 64, 38, 0.2);
  }
}

/* 成功按钮 */
.button-success,
.button.success {
  background-color: var(--color-confirm);
  color: var(--color-font-on-primary);

  &:hover:not(:disabled):not(.disabled):not(.loading) {
    background-color: rgba(100, 187, 92, 0.9);
    transform: translateY(calc(-1 * var(--unit)));
    box-shadow: 0 calc(4 * var(--unit)) calc(12 * var(--unit)) rgba(100, 187, 92, 0.3);
  }

  &:active:not(:disabled):not(.disabled):not(.loading) {
    background-color: rgba(100, 187, 92, 0.8);
    transform: translateY(0) scale(0.98);
    box-shadow: 0 calc(2 * var(--unit)) calc(6 * var(--unit)) rgba(100, 187, 92, 0.2);
  }

  &:focus-visible {
    outline-color: var(--color-confirm);
    box-shadow: 0 0 0 calc(3 * var(--unit)) rgba(100, 187, 92, 0.2);
  }
}

/* 警告按钮 */
.button-warning,
.button.warning {
  background-color: var(--color-alert);
  color: var(--color-font-on-primary);

  &:hover:not(:disabled):not(.disabled):not(.loading) {
    background-color: rgba(237, 111, 33, 0.9);
    transform: translateY(calc(-1 * var(--unit)));
    box-shadow: 0 calc(4 * var(--unit)) calc(12 * var(--unit)) rgba(237, 111, 33, 0.3);
  }

  &:active:not(:disabled):not(.disabled):not(.loading) {
    background-color: rgba(237, 111, 33, 0.8);
    transform: translateY(0) scale(0.98);
    box-shadow: 0 calc(2 * var(--unit)) calc(6 * var(--unit)) rgba(237, 111, 33, 0.2);
  }

  &:focus-visible {
    outline-color: var(--color-alert);
    box-shadow: 0 0 0 calc(3 * var(--unit)) rgba(237, 111, 33, 0.2);
  }
}

/* 按钮块级显示 */
.button-block,
.button.block {
  width: 100%;
  display: flex;
}

/* 按钮组 */
.button-group {
  display: inline-flex;
  gap: calc(8 * var(--unit));

  .button {
    flex: 1;
  }
}

/* 圆形按钮 */
.button-circle,
.button.circle {
  width: var(--button-height-medium);
  height: var(--button-height-medium);
  padding: 0;
  border-radius: 50%;

  &.button-large {
    width: var(--button-height-large);
    height: var(--button-height-large);
  }

  &.button-small {
    width: var(--button-height-small);
    height: var(--button-height-small);
  }
}

/* 方形按钮 */
.button-square,
.button.square {
  border-radius: calc(4 * var(--unit));
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .button-secondary,
  .button.secondary {
    background-color: var(--color-comp-background-secondary);
    color: var(--color-font-primary);
  }

  .button-text,
  .button.text {
    color: var(--color-brand);
  }

  .button-outline,
  .button.outline {
    border-color: var(--color-brand);
    color: var(--color-brand);
  }
}

/* 加载动画 */
@keyframes button-loading {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.button.loading .button-icon {
  animation: button-loading 1s linear infinite;
}

